import React,{ useState,useEffect,useCallback } from "react";
import classnames from 'classnames';

// 使用taro的抽象层 UI
// 包含在 @tarojs/components 
import { View,Swiper,SwiperItem,Text, Button, Image } from "@tarojs/components"; // ui组件
import Taro from "@tarojs/taro"; // 一些不同端的api
import {AtIcon} from 'taro-ui';

import { useEnv, useNavigationBar, useModal, useToast } from "taro-hooks";

import Cloading from '../../components/Cloading';
import DailyRecommend from "../dailyRecommend";
import './index.scss'


const Index = () => {

  const [showLoading,setShowLoading] = useState(false);
  const [bannerList,setBannerList] = useState([]);
  const [recommendPlayList,setRecommendPlayList] = useState([]);

  useEffect(() => {
    Taro.request({
      url:'http://localhost:3300/banner',
      success:function(params) {
        console.log(params.data);
        setBannerList(params.data.banners);
      }
    
    })

    Taro.request({
      url:'http://localhost:3300/personalized',
      success:function(e) {
        setRecommendPlayList(e.data.result);
      }
    })
  },[])

  const goPage = (name) => {
    Taro.navigateTo({
      url:`/pages/${name}/index`
    })
  }

  return (
    <View className={classnames({
      index_container:true,
      hasMusicBox:true
    })}>

    {/* <Cloading fullPage={true} hide={showLoading} /> */}
    <Swiper
      className="banner_list"
      indicatorColor="#999"
      indicatorActiveColor="#d43c33"
      circular
      indicatorDots
      autoplay
    >
      {
        
        bannerList.map(item => {
          return <SwiperItem key={item.targetId} className='banner_list_item'>
            <Image src={item.imageUrl} className="banner_list_item_img" />
          </SwiperItem>
        })
      }
    </Swiper>
    {/* <View className="handle_list">
        <View className="handle_list__item"
         onClick={goPage('dailyRecommend')}>
          <View className="handle_list__item__icon-wrap">
            <AtIcon 
              prefixClass="fa"
              value="calendar-minus-o"
              size="25"
              className="handle_list_item__icon"

            ></AtIcon>
          </View>
          <Text className="handle_list__item__text">每日推荐</Text>
        </View>
      </View> */}
      <View className="recommend_playlist" >

        <View className="recommend_playlist__title">
          <View className="recommend_playlist__content">
            {
              recommendPlayList.map(item => (
                <View
                  key={item.id}
                  onClick={goDetail.bind(null,item.id,item.name)}
                  className="recommend_playlist__item"
                >
                  <Image 
                    src={`item.picUrl?imageView&thumbnail=250x0`}
                    className="recommend_playlist__cover"
                  />
                  <View className="recommend_playlist__item__cover__num">
                    <Text className="at-icon at-icon-sound"></Text>
                    {
                      item.playCount < 10000 ?
                        item.playCount:
                        `${Number(item.playCount / 10000).toFixed(0)}万`
                    }
                  </View>
                </View>
              )
            }
          </View>
        </View>
      </View>
      
    </View>
  );
};

export default Index;

